<style scoped>
	.backgound {
		width: 100%;
		z-index: 0;
	}
	
	.backgound-img {
		-webkit-filter: blur(4px);
		/* Chrome, Opera */
		-moz-filter: blur(4px);
		-ms-filter: blur(4px);
		filter: blur(4px);
	}
	
	.square-img {
		border: 2px #fff solid;
		margin-top: -70px;
		margin-left: 20px;
		position: absolute;
	}
	
	.integral {
		margin-left: 150px;
	}
	
	.thoughts {
		margin-top: 20px;
		margin-left: 10px;
		margin-right: 10px;
	}
	
	._v-container {
		position: relative !important;
	}
	
	.vux-flexbox-item {
		margin-left: 0px !important;
	}
	
	.content-p {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		font-size: 15px;
		line-height: 20px;
		vertical-align: middle;
		display: table-cell;
	}
	
	.h-112 {
		height: 104px;
	}
	
	.h-52 {
		height: 52px;
	}
	
	.h-50 {
		height: 50px;
	}
	
	.weui-wepay-flow_vertical .weui-wepay-flow__line {
		height: 20px !important;
	}
</style>

<template>
	<div>
		<div class="backgound">
			<img width="100%" height="180px" class="backgound-img" :src="data1.pic"></img>
			<p style="position: absolute; top: 0px;margin: 20px;font-weight:bold">{{data1.signature}}</p>
		</div>
		<div class="square-img">
			<img width="100px" height="100px" :src="data1.pic" @click="selectImg(0, data1.pic, 1)"></img>
		</div>
		<div class="integral">
			{{data1.integral}}
			<img style="vertical-align: middle;" height="20px" src="../../static/img/integral.png"></img>
			<div v-if="isAttention == 0" style="display: inline;">
				<img style="vertical-align: middle;margin-left: 100px;" height="20px" src="../../static/img/add.png"></img>
				<p style="display: inline;" @click="attention">关注</p>
			</div>
			<div v-else style="display: inline;">
				<p style="display: inline; margin-left: 100px;color: #EE3A4A;" @click="cancelAttention">已关注</p>
			</div>
		</div>
		<div class="thoughts">
			<tab>
				<tab-item selected @on-item-click="switchTab(1)">说说</tab-item>
				<tab-item badge-background="#38C972" style="border-left: 1px #F2F2F2 solid;" badge-color="#fff" @on-item-click="switchTab(2)">店迹</tab-item>
			</tab>
			<div>
				<div v-show="showThought">
					<scroller :on-refresh="refresh" :on-infinite="loadMore" height="300" ref="myscroller">
						<flexbox v-for="item in data2" key="item">
							<flexbox-item :span="1/6">
								<div :class="[item.imageList.length > 0 ? 'h-112' : 'h-50']">
									<span v-if="item.date == '今天'">{{item.date}}</span>
									<span v-else>
										<p style="display: inline;font-size: 20px;">{{item.day}}</p>
										<p style="display: inline;margin-left: -8px;font-size: 10px;">{{item.month}}月</p>
										<p style="margin-top: -15px;font-size: 20px;">{{item.year}}</p>
									</span>
								</div>
							</flexbox-item>
							<flexbox-item :span="5/6" style="border-bottom: 1px #EE3A4A solid;">
								<div class="flex-demo content-p h-50" @click="showThoughtDetail(item.id)">
									{{item.content}}
								</div>
								<div class="flex-demo h-52" style="margin-bottom: 2px;" v-show="item.imageList.length > 0">
									<img style="display: inline;height: 52px;margin-left:2px ;" v-for="(item2, index) in item.imageList" :src="item2" @click="selectImg(index, item.imageList, 2)">
								</div>
							</flexbox-item>
						</flexbox>
					</scroller>
				</div>
				<div v-show="showTrace" style="height: 300px;overflow: auto;">
					<flow v-if="data3.length > 0" orientation="vertical" style="height:300px;">
						<div v-for="(item, index) in data3" style="margin-left: -300px;margin-top: -20px;">
							<flow-state :state="data3.length-index" key="item" :title="item.date+' '+item.storeName" is-done></flow-state>
							<flow-line v-show="index+1 < data3.length " is-done></flow-line>
						</div>
					</flow>
					<p v-else>还没有记录</p>
				</div>
			</div>

		</div>
		<transition name="slide-fade" class="fadeView">
			<div v-if="showBigImg">
				<image-view :imgArr="imgArr" :showImageView="true" :imageIndex="imageIndex" v-on:hideImage="hideImageView"></image-view>
			</div>
		</transition>
	</div>
</template>

<script>
	import { Flow, FlowState, FlowLine, Tab, TabItem, Flexbox, FlexboxItem, Divider } from 'vux'
	import imageView from 'vue-imageview'
	export default {
		components: {
			Tab,
			TabItem,
			Flexbox,
			FlexboxItem,
			Divider,
			'image-view': imageView,
			Flow,
			FlowState,
			FlowLine
		},
		data() {
			return {
				userId: window.localStorage["userId"],
				targetUserId: this.$route.query.targetUserId,
				data1: [],
				isAttention: 0, //是否关注
				onFetching: true,
				tip: '加载中',
				data2: [], //说说
				data3: [],
				pageNo: 1,
				showThought: true,
				showTrace: false,
				showBigImg: false,
				imgArr: [],
				imageIndex: 0
			}
		},
		mounted() {
			this.getUserInfo()
			this.getAttention()
		},
		methods: {
			showThoughtDetail(thoughtId) {
				this.$router.push({
					path: '/tourl/tdetail',
					query: {
						thoughtId: thoughtId,
						detailUserId: this.targetUserId
					}
				})
			},
			hideImageView() {
				this.showBigImg = false
			},
			selectImg(index, list, source) {
				this.showBigImg = true
				this.imageIndex = index
				if(source == 1) {
					this.imgArr.push(list)
				} else {
					this.imgArr = list
				}
			},
			getUserInfo() {
				this.$tldJsonp({
					isLayer: false,
					url: this.$domain + "/admin/tld/tdetail/getUserInfo.json",
					params: {
						userId: this.userId,
						detailUserId: this.targetUserId
					},
					successFc: (response) => {
						this.data1 = response.data.data
					}
				});
			},
			getAttention() {
				this.$tldJsonp({
					isLayer: false,
					url: this.$domain + "/admin/tld/phome/getAttention.json",
					params: {
						userId: this.userId,
						targetUserId: this.targetUserId
					},
					successFc: (response) => {
						this.isAttention = response.data.data
					}
				});
			},
			refresh() {
				setTimeout(() => {
					this.pageNo = 1;
					this.data = [];
					this.load();
					this.$refs.myscroller.finishPullToRefresh()
				}, 1000)
			},
			loadMore() {
				setTimeout(() => {
					this.load()
				}, 1000)
			},
			load() {
				let _that = this;
				this.$tldJsonp({
					isLayer: false,
					url: this.$domain + "/admin/tld/phome/queryThought.json",
					params: {
						userId: this.userId,
						targetUserId: this.targetUserId,
						pageNo: this.pageNo
					},
					successFc: (response) => {
						if(response.data.data == null) {
							_that.$refs.myscroller.finishInfinite(0);
							return;
						}
						if(response.data.data) {
							response.data.data.forEach(function(o) { //分别对应：数组元素，元素的索引，数组本身
								_that.data2.push(o)
							})
						}
						_that.$refs.myscroller.finishInfinite(1);
					}
				});
				this.pageNo++;
			},
			attention() {
				this.$tldJsonp({
					isLayer: true,
					url: this.$domain + "/admin/tld/phome/attention.json",
					params: {
						userId: this.userId,
						targetUserId: this.targetUserId
					},
					successFc: (response) => {
						this.isAttention = response.data.data
					}
				});
			},
			cancelAttention() {
				this.$tldJsonp({
					isLayer: true,
					url: this.$domain + "/admin/tld/phome/cancelAttention.json",
					params: {
						userId: this.userId,
						targetUserId: this.targetUserId
					},
					successFc: (response) => {
						this.isAttention = response.data.data
					}
				});
			},
			switchTab(index) {
				if(index == 1) {
					this.showThought = true
					this.showTrace = false
				} else {
					this.showThought = false
					this.showTrace = true
					//获得轨迹
					this.queryTrace()
				}
			},
			queryTrace() {
				this.$tldJsonp({
					isLayer: true,
					url: this.$domain + "/admin/tld/phome/queryTrace.json",
					params: {
						userId: this.userId,
						targetUserId: this.targetUserId
					},
					successFc: (response) => {
						this.data3 = response.data.data
					}
				});
			}
		}
	}
</script>